<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cesium Ellipsoid Primitive 示例</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
        .control-panel {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(42, 42, 42, 0.9);
            padding: 10px;
            border-radius: 5px;
            color: white;
            font-family: Arial, sans-serif;
            z-index: 1000;
            max-width: 300px;
        }
        button {
            background: #4CAF50;
            border: none;
            color: white;
            padding: 8px 16px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        button:hover {
            background: #45a049;
        }
        .toggle {
            background: #008CBA;
        }
        .toggle.active {
            background: #f44336;
        }
        .info {
            font-size: 12px;
            margin-top: 10px;
            line-height: 1.4;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<div class="control-panel">
    <h3>Ellipsoid Primitive 控制面板</h3>
    <button id="toggleTerrain">地形: 开启</button>
    <button id="toggleDepthTest">深度测试: 开启</button>
    <button id="toggleEllipsoid">显示椭球体</button>
    <button id="addRandomEllipsoid">添加随机椭球体</button>
    <button id="removeAll">移除所有椭球体</button>

    <div class="info">
        <p><strong>说明:</strong> 此示例展示如何使用Primitive创建椭球体，并确保其被地形正确遮挡。</p>
        <p><strong>深度测试:</strong> 启用后，椭球体将被地形遮挡。</p>
        <p><strong>地形:</strong> 关闭地形以查看椭球体的完整形状。</p>
    </div>
</div>

<script>
    // 初始化Cesium Viewer
    const viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain(),
        timeline: false,
        animation: false,
        baseLayerPicker: false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        fullscreenButton: false
    });

    // 设置初始相机位置
    viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(116.39, 39.9, 1000000),
        orientation: {
            heading: 0.0,
            pitch: -1.57,
            roll: 0.0
        }
    });

    // 存储椭球体Primitive的数组
    let ellipsoidPrimitives = [];

    // 启用地形深度测试
    viewer.scene.globe.depthTestAgainstTerrain = true;

    // 创建椭球体Primitive的函数
    function createEllipsoidPrimitive(longitude, latitude, height, radii, color, depthTestEnabled = true) {
        // 计算位置
        const position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);

        // 创建椭球体几何
        const ellipsoidGeometry = new Cesium.EllipsoidGeometry({
            radii: radii,
            vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL
        });

        // 创建模型矩阵
        const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);

        // 创建几何实例
        const geometryInstance = new Cesium.GeometryInstance({
            geometry: ellipsoidGeometry,
            modelMatrix: modelMatrix,
            id: 'ellipsoid-' + Date.now()
        });

        // 创建外观
        const appearance = new Cesium.PerInstanceColorAppearance({
            translucent: true,
            closed: true
        });

        // 创建Primitive
        const primitive = new Cesium.Primitive({
            geometryInstances: geometryInstance,
            appearance: appearance,
            releaseGeometryInstances: false,
            compressVertices: false,
            depthTestEnabled: depthTestEnabled
        });

        // 设置颜色
        const colorAttribute = Cesium.ColorGeometryInstanceAttribute.fromColor(color);
        geometryInstance.attributes = {
            color: colorAttribute
        };

        return primitive;
    }

    // 添加示例椭球体
    function addExampleEllipsoids() {
        // 北京 - 红色椭球体
        const beijingEllipsoid = createEllipsoidPrimitive(
            116.39, 39.9, 0,
            new Cesium.Cartesian3(50000.0, 50000.0, 80000.0),
            Cesium.Color.RED.withAlpha(0.7)
        );
        viewer.scene.primitives.add(beijingEllipsoid);
        ellipsoidPrimitives.push(beijingEllipsoid);

        // 上海 - 蓝色椭球体
        const shanghaiEllipsoid = createEllipsoidPrimitive(
            121.47, 31.23, 0,
            new Cesium.Cartesian3(40000.0, 40000.0, 60000.0),
            Cesium.Color.BLUE.withAlpha(0.7)
        );
        viewer.scene.primitives.add(shanghaiEllipsoid);
        ellipsoidPrimitives.push(shanghaiEllipsoid);

        // 广州 - 绿色椭球体
        const guangzhouEllipsoid = createEllipsoidPrimitive(
            113.23, 23.16, 0,
            new Cesium.Cartesian3(30000.0, 30000.0, 50000.0),
            Cesium.Color.GREEN.withAlpha(0.7)
        );
        viewer.scene.primitives.add(guangzhouEllipsoid);
        ellipsoidPrimitives.push(guangzhouEllipsoid);
    }

    // 添加随机椭球体
    function addRandomEllipsoid() {
        const longitude = Math.random() * 60 + 70;  // 70-130度
        const latitude = Math.random() * 40 + 10;   // 10-50度
        const height = 0;

        const radii = new Cesium.Cartesian3(
            20000 + Math.random() * 40000,
            20000 + Math.random() * 40000,
            30000 + Math.random() * 50000
        );

        const color = Cesium.Color.fromRandom({
            alpha: 0.7
        });

        const ellipsoid = createEllipsoidPrimitive(
            longitude, latitude, height, radii, color
        );

        viewer.scene.primitives.add(ellipsoid);
        ellipsoidPrimitives.push(ellipsoid);
    }

    // 移除所有椭球体
    function removeAllEllipsoids() {
        ellipsoidPrimitives.forEach(primitive => {
            viewer.scene.primitives.remove(primitive);
        });
        ellipsoidPrimitives = [];
    }

    // 切换地形显示
    document.getElementById('toggleTerrain').addEventListener('click', function() {
        const terrainProvider = viewer.terrainProvider;
        if (terrainProvider instanceof Cesium.EllipsoidTerrainProvider) {
            viewer.terrainProvider = Cesium.createWorldTerrain();
            this.textContent = '地形: 开启';
        } else {
            viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
            this.textContent = '地形: 关闭';
        }
    });

    // 切换深度测试
    document.getElementById('toggleDepthTest').addEventListener('click', function() {
        viewer.scene.globe.depthTestAgainstTerrain = !viewer.scene.globe.depthTestAgainstTerrain;
        const isEnabled = viewer.scene.globe.depthTestAgainstTerrain;
        this.textContent = '深度测试: ' + (isEnabled ? '开启' : '关闭');

        // 更新所有椭球体的深度测试设置
        ellipsoidPrimitives.forEach(primitive => {
            primitive.depthTestEnabled = isEnabled;
        });
    });

    // 切换椭球体显示
    document.getElementById('toggleEllipsoid').addEventListener('click', function() {
        if (ellipsoidPrimitives.length > 0) {
            removeAllEllipsoids();
            this.textContent = '显示椭球体';
        } else {
            addExampleEllipsoids();
            this.textContent = '隐藏椭球体';
        }
    });

    // 添加随机椭球体
    document.getElementById('addRandomEllipsoid').addEventListener('click', addRandomEllipsoid);

    // 移除所有椭球体
    document.getElementById('removeAll').addEventListener('click', function() {
        removeAllEllipsoids();
        document.getElementById('toggleEllipsoid').textContent = '显示椭球体';
    });

    // 初始添加示例椭球体
    addExampleEllipsoids();
</script>
</body>
</html>